<template>
    <div class="vue-body" >
        <!-- 搜索条件, 按钮 放在一行 -->
        <div class="btn-header">
            <!-- 搜索条件 -->
            <div >
                <el-input style="width: 200px; margin-right: 5px;" placeholder="请输入用户名" suffix-icon="el-icon-search"
                          v-model="params.name"></el-input>
                <el-input style="width: 200px; margin-right: 5px;" placeholder="请输入昵称" suffix-icon="el-icon-position"
                          v-model="params.nickname"></el-input>
                <el-input style="width: 200px; margin-right: 5px;" placeholder="请输入角色" suffix-icon="el-icon-message"
                          v-model="params.name"></el-input>
                <el-button type="primary" @click="load">搜索</el-button>
            </div>
        </div>
        
        <!-- 列表查询 -->
        <el-table :data="cartList" border stripe :header-cell-class-name="headerBg" v-loading="loading">
            <el-table-column type="selection" label="全选" width="40" fixed="left"></el-table-column>
            <el-table-column prop="name" label="图书名称" width="100" align="center"></el-table-column>
            <el-table-column prop="author" label="作者" width="100" align="center"></el-table-column>
            <el-table-column prop="workTime" label="著作日期" width="100" align="center"></el-table-column>
            <el-table-column prop="sales" label="销量（册）" width="100" align="center"></el-table-column>
            <el-table-column prop="stock" label="库存（册）" width="100" align="center"></el-table-column>
            <el-table-column prop="bookImage" label="图书封面" width="120" align="center" style="padding: 0;">
                <template slot-scope="scope">
                    <div class="book-content" style="width: 100%; display: flex; flex-wrap: wrap;">
                        <div style="display: flex;">
                            <div class="img-box">
                                <img :src="require('@/' + scope.row.bookImage)" class="imgbackground">
                            </div>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="bookDes" label="图书简介" width="500" align="left">
                <template slot-scope="scope">
                    <el-tooltip
                         :content="scope.row.bookDes"
                         raw-content
                         placement="top-start" popper-class="tip-class"
                         v-if="scope.row.bookDes"
                    >
                        <span v-if="scope.row.bookDes && scope.row.bookDes.length <= 130">{{ scope.row.bookDes }}</span>
                        <span v-if="scope.row.bookDes && scope.row.bookDes.length > 130">{{ scope.row.bookDes.substr(0, 130) + "..." }}</span>
                    </el-tooltip>
                    <span v-else-if="scope.row.bookDes== null"> NA </span>
                </template>
            </el-table-column>
            <el-table-column prop="state" label="发布状态" width="100" align="center">
                <template slot-scope="scope"> <!-- 1打开， 0关闭 -->
                    <el-switch v-model="scope.row.state" :active-value="1" :inactive-value="0" @change='bookRelease(scope.row)'></el-switch>
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="160" align="center"></el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="success" size="mini">编辑 <i class="el-icon-edit"></i></el-button>
                    <el-button type="danger" size="mini">移除 <i class="el-icon-remove-outline"></i></el-button>
                </template>
            </el-table-column>
        </el-table>
        
        <!-- 分页查询 -->
        <div style="padding: 10px 0; text-align: left;">
            <el-pagination
                 @size-change="handleSizeChange"
                 @current-change="handleCurrentChange"
                 :current-page="pageNum"
                 :page-sizes="[5, 10, 20, 50]"
                 :page-size="pageSize"
                 layout="total, sizes, prev, pager, next, ->,  jumper"
                 :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import {page} from "@/api/goods/book";

export default {
    name: "PromoPage",
    data() {
        return {
            cartList: [],
            params: {
                isWell: 1, // 畅销图书
            },
            pageNum: 1,
            pageSize: 5,
            loading: false,
            headerBg: 'headerBg',
            bookDes: '这个世界,不会偏爱任何一个不劳而获的人,当然也不会,辜负任何一个默默努力的人。 ' +
                 '爬在楼梯口，走廊上的藤蔓，映着明亮的月光，显得更加的翠绿。微风拂过，闪烁着银子一般的光。',
            total: 0, // 总数
            allSelect: false, // 全选
            selectedList: [], // 已选中数据
        };
    },
    methods: {
        handleSizeChange(pageSize) {
            this.pageSize = pageSize;
            this.load()
        },
        handleCurrentChange(pageNum) {
            console.log(pageNum)
            this.pageNum = pageNum
            this.load()
        },
        load() {
            this.loading = true;
            page(this.pageNum, this.pageSize, this.params).then(res => {
                this.cartList = res.data.records
                this.total = res.data.total
                this.loading = false
            }).catch(() => this.loading = false)
        },
        
        // 处理选中数据
        handleSelectionChange(rows) {
        
        },
        
        // 修改热门状态
        changeHot(book) {
        
        },
        
        // 修改畅销状态
        changeWell(book) {
        
        },
        
        // 图书发布
        bookRelease(book) {
        
        },
    },
    async mounted() {
        this.load()
    },
}
</script>

<style>

.img-box {
    height: 100px;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.img-box .imgbackground {
    width: 100px;
    height: 100px;
}


div.tip-class {
    padding: 1.5rem !important;
    max-width: 70% !important;
    line-height: 20px;
    background-color: #7ab4cd !important;/*设置矩形框的背景颜色*/
}
/* [x-placement^='A'] A指的是el-tooltip标签中的placement的值，此处是bottom。猜测用于动态设置border-A-color。*/
.el-tooltip__popper[x-placement^='bottom'].tip-class .popper__arrow::after {
    border-bottom-color: #8e4549 !important; /*设置指向箭头的颜色*/
}

</style>
